<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type='text/javascript' src='../js/jquery-2.2.3.min.js'></script>
    <title>情感学院</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            width: 100%;
            background: #f2f2f2;
        }

        #page {
            background-color: #fff;
        }

        #info_style {
            position: relative;
            background-color: #fff;
            padding: 20px 5px
        }

        #info_style img {
            width: 75px;
            height: 75px;
            border-radius: 37px;
            position: absolute;
            top: 60px;
        }

        .line {
            clear: both;
            width: 96%;
            height: 2px;
            background: #e0e0e0;
            margin-top: 50px;
        }

        .msg {
            margin-top: 10px;
            background-color: #fff;
            padding: 10px;
        }

        .msg h4 {
            padding-left: 5px;
            background: #f15959;
            color: #fff;
        }

        .msg p {
            margin-top: 5px;
            padding: 0px 0px;
            font-size: 15px;
            font-size: 14px;
            color: #999;
        }

        .list_style {
            margin-top: 10px;
            background-color: #fff;
            padding: 10px;
        }

        .list_style h4 {
            padding-left: 5px;
            background: #f15959;
            color: #fff;
        }

        ul {
            margin-top: 10px;
        }

        li {
            list-style: none;
            color: #00c4da;
            line-height: 26px;
            text-decoration: underline;
            font-size: 15px;
        }

        .head_img {
            transform: translateY(-50%);
            position: absolute;
            top: 50%;
            left: 5px
        }

        .head_right_focus {
            position: absolute;
            right: 20px;
            background: #de756e;
            color: #fff;
            border-radius: 10px;
            padding: 2px 10px;
            font-size: 14px;
            cursor: pointer;
        }

        .head_right_chat {
            position: absolute;
            right: 110px;
            background: #00c4da;
            color: #fff;
            border-radius: 10px;
            padding: 2px 10px;
            font-size: 14px;
            cursor: pointer;
        }

        #float_view {
            width: 100%;
            height: 100%;
           
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 666;
        }

        #msg {
            width: 60%;
            position: absolute;
            height: 200px;
            background: white;
            top: 200px;
            left: 20%;
            border-radius: 8px;
            text-align: left;
            color: red;
            font-size: 16px;
            line-height: 50px;
            padding-left: 5px;
            padding: 0px 10px;

        }
        #msg2 {
        width: 40%;
        position: absolute;
        background: #d1d1d1;
        top: 200px;
        left: 30%;
        border-radius: 8px;
        text-align: center;
        color: white;
        line-height: 50px;
        font-size: 16px;
        }
        .msg-title {
            border-bottom: 1px solid #888888b0;
            color: #000
        }

        .msg-item {
            color: #00bcd4;
            border-bottom: 1px solid #8888883d;
        }


    </style>
</head>

<body style="background-color: #fff;">
<div id="float_view">
    <div id="msg">
        <h4 class="msg-title"></h4>
        <div class="msg-item email"></div>
        <div class="msg-item phone"></div>
    </div>
   <div id="msg2"></div>
</div>
<div id="page" style="background-color: #f2f2f2a1">
    <div id="info_style">
        <img class="head_img" id="img_p" src="">
        <div style="margin-left: 80px;padding-bottom: 30px;line-height: 30px;">
            <h2 style="font-size: 20px;" id="name">何威老师</h2>
            <p style="color: #f1b70f;font-size: 15px;" id="areas_expertise">>心理咨询、婚姻咨询</p>
            <p style="color: #999;font-size: 13px;" id='expert_profile'>传媒大学汉语言文学、心理学、图片摄影</p>
            <p class="head_right_focus">我要关注</p>
            <p class="head_right_chat">马上咨询</p>
        </div>
    </div>
    <div class="msg">
        <h3>专家介绍</h3>
        <p style="text-indent: 30px;" id='soft_paper'>CCTV6《中国电影报道》、《世界电影之旅》摄像、编导 生命树医治、心理咨询师、婚姻咨询师 《盟约》课程讲师、婚姻咨询师
            婚姻家庭咨询讲师（中级） 共青团系统心理健康辅导员（中级） 婚姻家庭咨询师（二级）
        </p>
    </div>
    <div class="list_style">
        <h3>专家软文</h3>
        
        <ul id="artList">
            <!-- <li >婚恋心理：剩女必学5个脱单攻略</li>
            <li>恋爱技巧之如何处理恋爱中遇到的问题</li> -->

        </ul>
         
    </div>
</div>
<script type="text/javascript">
 var  isCando=false;
    $(function() {
        if (localStorage.getItem('number')) {

           $.ajax({
            url: "/member/getMemberinfoByNum?number=" + localStorage.getItem('number'),
            type: "get",
            dataType: "json",
            success: succesFunc,
            error: errorFunc
        });

        function succesFunc(res) {
            if (res.code == 200) {
                if (res.data[0].yn) {
                  isCando=true;
                } else {
                    // $("#float_view").show();
                    // $("#msg").text("还未通过审核");
                }

            }
        }

        function errorFunc(res) {

        }

        }else{
         

        }
       

    })




    $("#float_view").hide();

    function getUrlValue() {
        var res = location.search.toLowerCase();

        var qs = (res.length > 0 ? res.substring(1) : ""),

            args = {},

            items = qs.length ? qs.split("&") : [],

            item = null,

            name = null,

            value = null,

            i = 0,

            len = items.length;

        for (i = 0; i < len; i++) {

            item = items[i].split("=");

            name = decodeURIComponent(item[0]);

            value = decodeURIComponent(item[1]);

            if (name.length) {

                args[name] = value;

            }

        }
        return args;

    };
    var args = getUrlValue();
    $(function () {
        getAct();
        $.ajax({
            method: "get",
            url: "/expert/getExpertDetail?expert_no=" + args.expert_no,
            success: function (res) {
                console.log(res)
                if (res.code == 200) {
                    console.log(res.data[0]);
                    $("#img_p").attr('src', res.data[0].expert_photos);

                    $("#name").text(res.data[0].expert_name + "老师");

                    $("#areas_expertise").text(res.data[0].areas_expertise);

                   // $("#expert_profile").text(res.data[0].expert_profile);

                    $("#soft_paper").empty().append(res.data[0].expert_profile)
    //                  <div id="msg">
    //     <h4 class="msg-title">何威老师</h4>
    //     <div class="msg-item">邮箱：907762353@qq.com</div>
    //     <div class="msg-item">电话：123456789</div>
    // </div>        
                    $(".msg-title").text(res.data[0].expert_name + "老师");
                    $('.email').text(res.data[0].expert_email)

                    $('.phone').text(res.data[0].expert_phone)

                } else {

                }
            },
            error: function (error) {
                console.log(error)
            }
        })
    })
    function getAct(){
       $.ajax({
                method: "get",
                url: "/expert/getExpertAct?expert_no=" + args.expert_no,
                success: function (res) {
                    console.log(res)
                    var  artList='';
                    for (var i = 0; i < res.data.length; i++) {
                        artList+='<li><a href=./loveDetail0.html?id='+res.data[i].ARTICLE_ID+'>'+res.data[i].TITLE+'</a></li>'
                       
                    }
                    $("#artList").empty().append(artList)
                },
                error: function (error) {
                    console.log(error)
                }
            })



    }
    $('.head_right_focus').click(function () {
       if(isCando){


        if ($(this).text() == "我要关注") {
            $.ajax({
                method: "get",
                url: "/collection/type?coll_type=3&actNum=" + args.expert_no + "&id=" + localStorage.getItem('number'),
                success: function (res) {
                    console.log(res)
                    $('.head_right_focus').text('已关注')
                },
                error: function (error) {
                    console.log(error)
                }
            })
        } else {
            $.ajax({
                method: "get",
                url: "/collection/cancelColl?actNum=" + args.expert_no + "&id=" + localStorage.getItem('number'),
                success: function (res) {
                    console.log(res)
                    $('.head_right_focus').text('我要关注')
                },
                error: function (error) {
                    console.log(error)
                }
            })
        }
       }else{
        $("#float_view").show();
        $("#msg").hide();
        $("#msg2").text("请先成为会员");
       }

        

    });
    getCollection();

    function getCollection() {
        $.ajax({
            method: "get",
            url: "/collection/isColl?actNum=" + args.expert_no + "&num=" + localStorage.getItem('number'),
            success: function (res) {
                console.log("****")
                console.log(res)
                if (res.data == '已关注') {
                    $(".head_right_focus").text('取消关注');
                } else {

                }
            },
            error: function (error) {
                console.log(error)
            }
        })
    }

    $(".head_right_chat").click(function () {
       if (isCando) {
        $("#float_view").show()
         $("#msg").show();
       }else{
        $("#float_view").show();
        $("#msg").hide();
        $("#msg2").text("请先成为会员");
       }
        

    })
    $("#float_view").click(function () {
        $("#float_view").hide();

    })
</script>
</body>

</html>